<template>
    <el-card shadow="always">
        <div class="card-header">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span style="margin-left: 10px">筛选搜索</span>
            </div>
            <div>
                <el-button @click="query(1)">重置</el-button>
                <el-button type="primary" @click="query(2)">查询搜索</el-button>
            </div>
        </div>
        <el-form :inline="true" :model="form" class="demo-form-inline" label-width="140px">
            <el-form-item label="订单编号">
                <el-input v-model="form.orderCode" placeholder="订单编号" />
            </el-form-item>
            <el-form-item label="收货人">
                <el-input v-model="form.name" placeholder="收货人姓名/手机号码" />
            </el-form-item>
            <el-form-item label="提交时间">
                <el-col :span="11">
                    <el-date-picker v-model="form.date" type="date" placeholder="请选择时间" />
                </el-col>
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select v-model="form.change" clearable placeholder="全部">
                    <el-option v-for="(item, index) in form.changes" :key="index" :value="item"
                        @click="oldchange(index)" />
                </el-select>
            </el-form-item>
            <el-form-item label="订单分类">
                <el-select v-model="form.fenlei" clearable placeholder="全部">
                    <el-option v-for="(item, index) in form.fenleis" :key="index" :value="item"
                        @click="oldFenlei(index)" />
                </el-select>
            </el-form-item>
            <el-form-item label="订单来源">
                <el-select v-model="form.origin" clearable placeholder="全部">
                    <el-option v-for="(item, index) in form.origins" :key="index" :value="item"
                        @click="oldorigin(index)" />
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>
    
<script setup lang='ts'>
import { ref, defineEmits } from 'vue';
import { fromPairs } from 'lodash';
import { orderList } from '@/request/apis/admin';


const form = ref({
    orderCode: '',
    name: '',
    date: '',
    change: "",
    changes: ["待付款", '待发货', "已发货", '已完成', "已关闭"],
    fenlei: "",
    fenleis: ['正常订单', '秒杀订单'],
    origin: "",
    origins: ["PC订单", "APP订单"]
})
// 订单状态
let chageIdx: number;
function oldchange(index: number) {
    chageIdx = index;
}
// 订单分类
let fenleiIdx: number;
function oldFenlei(index: number) {
    fenleiIdx = index
}
// 订单来源
let originIdx: number;
function oldorigin(index: number) {
    originIdx = index
}
// 查询
const emit = defineEmits(['Emitlist'])
async function query(num: number) {
    if (num == 1) {
        form.value.orderCode = '',
            form.value.name = '',
            form.value.date = '',
            form.value.change = "";
        form.value.fenlei = "";
        form.value.origin = "";
        let res = await orderList({})
        emit("Emitlist", res.data.list)
    } else {
        let res = await orderList({
            status: chageIdx,
            orderSn: form.value.orderCode,
            orderType: fenleiIdx,
            sourceType: originIdx,
            receiverKeyword: form.value.name
        })
        emit("Emitlist", res.data.list)
    }

}
</script>
    
<style scoped>
.content-box {
    padding: 10px 0 10px 10px;
    box-sizing: border-box;
    background-color: #fff;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.el-input__wrapper {
    width: 191px;
}

.el-form {
    margin-top: 10px;
}
</style>